<template>
  <div class="login" :style="{minHeight: minHeight}">
    <div class="forget-card bgwrite">
      <div class="top-bg">
            <div class="header">
                <div class="left" @click="diffBack" ><img src="@/assets/img/public/leftarrow.png" alt=""></div>
                <div class="title">{{title}}</div>
                <div class="right"> </div>
            </div>
        <div class="background-name">
          <div class="img-case"></div>
        </div>
      </div>
      <div class="reset-wrapper bgwrite">
        <div class="loginWrap">
            <div class="loginForm">
            <div class="loginPhone bgwrite"
                    ref="loginPhoneref">
                  <img src="@/assets/img/login/contract.png"
                        class="fl phoneIcon" />
                  <input type="number"
                          :placeholder="phoneNumP"
                          class="phoneInput"
                          v-model="phoneNum"
                          ref="phoneInputref"
                          @click="inputFocusPhone"
                          @blur="setBMH"
                          v-on:input="inputPhone"/>
                  <img v-if="phoneNum" class="pwd-right" src="@/assets/img/login/cancelBtn.png" alt="" @click="clearNumber">
              </div>
              <div  class="loginPhone bgwrite"
                    ref="loginPhoCoderef">
                  <img src="@/assets/img/login/phone.png"
                        class="phoneIcon" />
                  <input type="number"
                          :placeholder="phoCodeNumP"
                          class="phoneInput"
                          v-model="phoCodeNum"
                          ref="loginCoderef"
                          @click="inputFocusCode"
                          @blur="setBMH"
                          v-on:input="inputPhoCode" />
                  <input
                    type="button"
                    v-model="getPhoCode"
                    class="getphoCode wordsWrite"
                    @click="getphoCode"
                    @blur="setBMH"
                    v-if="Reciprocal"
                    >
                    <input type="button" v-model="getPhoCode" class="getphoCodeR wordsWrite" v-else>
              </div>
              <div class="loginPassword"
                    ref="registerPwdref">
                  <img src="@/assets/img/login/pwd.png"
                        class="phoCodeIcon" />
                  <input type="password"
                          :placeholder="setPwdPl"
                          class="phoCodeInput"
                          v-model="setPwd"
                          ref="setPwdref"
                          @click="inputFocusPwd"
                          @blur="setBMH"
                          v-on:input="inputPwding" />
              </div>
              <div class="loginPassword"
                    ref="registerCheckref">
                  <img src="@/assets/img/login/pwd.png"
                        class="phoCodeIcon" />
                  <input type="password"
                          :placeholder="checkPwdPl"
                          class="phoCodeInput"
                          v-model="checkPwd"
                          ref="checkPwdref"
                          @click="inputFocusRepwd"
                          @blur="setBMH"
                          v-on:input="checkPwding"/>
              </div>
              <div class="contract-forget">
                <div class="contract-left">
                  <van-checkbox v-model="checked" checked-color="#5E8EFE" class="checkbox-style"><div class="contract-word" @click="goUserContract">平台协议</div></van-checkbox>
                </div>
              </div>
              <!-- 登录按钮 -->
              <div class="loginBtn wordsWrite"
                 @click="loginClick">
                  <p class="loginFont">{{ loginState }}</p>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import { removeRole, removeToken, removeuserUid, getRole} from "@/utils/auth.js";
export default {
  name:"forgetPwd",
  components: {
  },
  data() {
    return {
      getPhoCode: "发送验证码",
      loginState: "确定",
      phoneRegular: /^1[0-9]\d{9}$/,
      pswdNumRegular: /^[a-zA-Z0-9]{6,12}$/,
      phoneNum: "",
      phoneNumP: "请输入你的手机号",
      phoCodeNum: "",
      phoCodeNumP: "请输入验证码",
      setPwd: "",
      setPwdPl: "请输入密码",
      checkPwd: "",
      checkPwdPl: "请再次输入密码",
      phoneType:"",
      time: 60,
      Reciprocal: true,
      checked: true,
      title: '',
      paramsIfno:"",
      minHeight: '200vh',
    }
  },
  computed: {
    ...mapState({
      willUserPhone: state => state.willUserPhone,
      willUserCode: state => state.willUserCode,
      willUserPwd: state => state.willUserPwd,
      willUserPwdCheck: state => state.willUserPwdCheck,
      WilLoginPhone: state => state.WilLoginPhone
       })
  },
  created() {
    this.paramsIfno = this.$route.params.fromW
    if(this.paramsIfno == "originPwd") {
      this.title = "修改密码"
    } else if (this.paramsIfno == "forgetPwd") {
      this.title = "忘记密码"
    }
     if (this.$route.params.hasContent =  "3") {
      //  从协议跳转 记录 用户之前跳转前的操作
      this.phoneNum = this.willUserPhone
      this.phoCodeNum = this.willUserCode
      this.setPwd = this.willUserPwd
      this.checkPwd  = this.willUserPwdCheck
     }
     if(this.WilLoginPhone) {
       this.phoneNum =  this.WilLoginPhone
     }

  },
  methods: {
    setBMH(){
      this.minHeight = '100vh'
    },
    setFMH(){
      this.minHeight = '130vh'
    },
    // 电话聚焦
    inputFocusPhone() {
      this.$refs.phoneInputref.focus()
      this.setFMH()
    },
    // 验证码校验
    inputFocusCode() {
      this.$refs.loginCoderef.focus()
      this.setFMH()
    },
    // 密码初次校验
    inputFocusPwd() {
      this.$refs.setPwdref.focus()
      this.setFMH()
    },
    // 密码二次校验
    inputFocusRepwd() {
      this.$refs.checkPwdref.focus()
      this.setFMH()
    },
    diffBack() {
      this.setWillUserPhone("")
      this.setWillUserCode("")
      this.setWillUserPwd("")
      this.setWillUserPwdCheck("")
      // 需要判断处理 未登录  忘记密码 + 个人中心 密码修改
      if (this.paramsIfno == "forgetPwd") {
        this.$router.push('/login')
      } else if (this.paramsIfno == "originPwd"){

        if (getRole() == 2){
          this.$router.push('/performance/myPersonality')
        } else if (getRole() == 3){
          this.$router.push('/performance/myPersonality')
        } else {
          this.$router.push('/designer/myPersonality')
        }
      }
    },
    // 跳转合同
    goUserContract() {
      if (this.phoneNum != ""){
        this.setWillUserPhone(this.phoneNum)
      }
      if (this.phoCodeNum != "") {
        this.setWillUserCode(this.phoCodeNum)
      }
      if (this.setPwd != "") {
        this.setWillUserPwd(this.setPwd)
      }
      if (this.checkPwd != "") {
        this.setWillUserPwdCheck(this.checkPwd)
      }
      if (this.paramsIfno == "forgetPwd") {
        this.$router.push({path: '/userContract', query: {fromW: 'forgetF'}})
      } else if (this.paramsIfno == "originPwd") {
        console.log(this.paramsIfno == "originPwd")
        this.$router.push({path: '/userContract', query: {fromW: 'originPwd'}})
      }
    },
    getphoCode() {
      if (this.phoneNum == "") {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.phoneInputref.style = "color:#EA1F36;";
        this.phoneNumP = "请输入你的手机号";
        return false;
      } else if (!this.phoneRegular.test(this.phoneNum)) {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.phoneInputref.style = "color:#EA1F36;";
        this.phoneNum = "";
        this.phoneNumP = "请输入正确的手机号";
        return false;
      } else {
        let clickCode = "0000";
        this.time = 60
        this.Reciprocal = false;
        this.timer();
        this.sendPhoneCode();
      }
    },
    timer() {
      if (this.time > 0) {
        this.time--;
        this.getPhoCode = this.time + "s";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.getPhoCode = "获取验证码";
        this.Reciprocal = true;
      }
    },
    inputPhone() {
      if (this.phoneNum !== "") {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #e6e6e6;";
        this.$refs.phoneInputref.style = "color:#333131;";
      }
    },
    inputPhoCode() {
      if (this.phoCodeNum !== "") {
        this.$refs.loginCoderef.style = "color:#333131;";
        this.$refs.loginPhoCoderef.style = "border-bottom: 1px solid #e6e6e6;";
      }
    },
    // 初次输入密码
    inputPwding() {
      if (this.setPwd !== "") {
        this.$refs.setPwdref.style = "color:#333131;";
        this.$refs.registerPwdref.style = "border-bottom: 1px solid #e6e6e6;";
      }
    },
    // 再次输入密码
    checkPwding() {
      if (this.checkPwd !== "") {
        this.$refs.checkPwdref.style = "color:#333131;";
        this.$refs.registerCheckref.style = "border-bottom: 1px solid #e6e6e6;";
      }
    },
    loginClick() {
      if (this.phoneNum === "") {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.phoneInputref.style = "color:#EA1F36;";
        this.phoneNumP = "请输入你的手机号";
        return false;
      } else if (!this.phoneRegular.test(this.phoneNum)) {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.phoneInputref.style = "color:#EA1F36;";
        this.phoneNum = "";
        this.phoneNumP = "请输入正确的手机号";
        return false;
      } else if (this.phoCodeNum === "") {
        this.$refs.loginCoderef.style = "color:#EA1F36;";
        this.$refs.loginPhoCoderef.style = "border-bottom: 1px solid #EA1F36;";
        this.phoCodeNumP = "输入你的验证码";
        return false;
      } else if (this.phoCodeNum.length !== 6) {
        this.$refs.loginCoderef.style = "color:#EA1F36;";
        this.$refs.loginPhoCoderef.style = "border-bottom: 1px solid #EA1F36;";
        this.phoCodeNum = "";
        this.phoCodeNumP = "输入正确的验证码"
        return false;
      } else if (this.setPwd === "") {
        this.$refs.registerPwdref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.setPwdref.style = "color:#EA1F36;";
        // this.setPwd = "请设置密码";
        this.setPwdPl= "请设置密码"
        return false;
      } else if (!this.pswdNumRegular.test(this.setPwd)){
        this.$refs.registerPwdref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.setPwdref.style = "color:#EA1F36;";
        this.setPwd = ""
        this.setPwdPl= "密码须6 - 12 位数字/字母"
        return false;
      } else if (this.checkPwd === "") {
        this.$refs.registerCheckref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.checkPwdref.style = "color:#EA1F36;";
        this.checkPwdPl = "请确认密码"
        return false;
      } else if (this.setPwd !== this.checkPwd) {
        this.$refs.registerCheckref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.checkPwdref.style = "color:#EA1F36;";
        // this.checkPwd = "密码不一致";
        this.checkPwd = ""
        this.checkPwdPl = "密码不一致"
        return false;
      } else if (!this.checked) {
        this.$toast({message: "请勾选平台协议"})
        return false;
      }
       this.Codelogin();
    },
    //发送验证码
    async sendPhoneCode() {
      const SPC = await HTTP("getCode", {
        phoneNumber: this.phoneNum,
        type: "2"
      });
      if (SPC.code == 200) {
        this.$toast({
            message: "验证码发送成功"
        })
      } else if(SPC.code == 1008) {
        this.$toast({
            message: "该账号未注册，请注册"
        })
        this.time = 0;
        this.getPhoCode = "发送验证码";
        this.Reciprocal = true;
      } else {
        this.$toast({
            message: SPC.msg
        })
      }
    },
    // 修改密码
    async Codelogin() {
      const _self = this
      const Codelogin = await HTTP("editPassword", {
        phone: _self.phoneNum,
        newPwd: _self.$md5(_self.setPwd),
        newTwoPwd: _self.$md5(_self.setPwd),
        pin: _self.phoCodeNum
        // pin: "111111" // 需要删除
      });
      if (Codelogin.code == 200) {
        _self.setWillUserPhone("")
        _self.setWillUserCode("")
        _self.setWillUserPwd("")
        _self.setWillUserPwdCheck("")
        _self.setWilLoginPhone("")
        _self.setWillLoginPwd("")
        removeToken();
        removeuserUid();
        removeRole();
        this.$store.commit('setTabIndexP',0)
        this.$store.commit('setTabIndex',0)
        const toast = _self.$toast.success({
          duration: 2000,       // 持续展示 toast
          forbidClick: true, // 禁用背景点击
          message: '修改成功'
        });
        let second = 2;
        const timer = setInterval(() => {
          second--;
          if (!second){
            clearInterval(timer);
            _self.$toast.clear();
            _self.$router.push('/login')
          }
        }, 1000);
      } else {
        _self.$toast({message:Codelogin.msg})
      }
    },
    clearNumber() {
      this.phoneNum = ""
    },
    ...mapMutations(["setWillUserPhone", "setWillUserCode", "setWillUserPwd", "setWillUserPwdCheck", "setWilLoginPhone", "setWillLoginPwd"])
  },
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  background: #fff;
}
.forget-card {
  width: 100%;
  height: 100%;
  .top-bg{
      position: relative;
      width: 100%;
      height: 4.5rem;
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      .background-name {
        position: absolute;
        top: 0;
        width: 100%;
        height: 4.5rem;
        .img-case{
          width: 100%;
          height: 4.5rem;
          margin: 0 auto;
          background-image: url(../../assets/img/login/backgroundIcon.png);
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: 100% 4.5rem;
        }

      }
    .header {
            position: absolute;
            background: transparent;
            color: #ffffff;
            width: 100%;
            height: 0.92rem;
            line-height: 0.92rem;
            box-sizing: border-box;
            padding: 0 3%;
            display: flex;
            z-index: 10000;
            div{
                display: inline-block;
                vertical-align: top;
            }
            .left{
                width: auto;
                margin-top: 0.15rem;
                img{
                    width: 0.40rem;
                    height: 0.40rem;
                }
            }
            .title {
                color: #ffffff;
                font-size: 0.35rem;
                text-align: center;
                flex: 1;
                }
            .right{
                font-size: 0.32rem;
                height: 0.92rem;
                line-height: 0.92rem;
                width: auto;
            }
        }
  }
  .reset-wrapper{
    // position: absolute;
    // top: 2.4rem;
    margin-top: -2.4rem;
    width: 100%;
    background: transparent;
  }
  .loginWrap {
    width: 80%;
    margin: 0 auto;
    .LoginFont {
      width: 100%;
      font-size: 0.26rem;
      font-weight: 500;
      margin-top: 0.4rem;
    }
    .loginForm {
      position: relative;
      width: 100%;
      .loginPhone {
        position: relative;
        width: 100%;
        height: 1rem;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        border: 1px solid #E5E5E5;
        border-radius: 0.1rem;
        padding: 0 0.24rem;
        margin-top: 0.24rem;
        .phoneIcon {
          width: 0.3rem;
        }
        .phoneInput {
          // 解决在 ios 下点击 input 页面空白问题
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          width: 4.5rem;
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .pwd-right{
          position: absolute;
          width: 0.3rem;
          right: 0.24rem;
          top: 0px;
          bottom: 0px;
          margin: auto;
        }

        .getphoCode {
          width: 1.9rem;
          height: 0.4rem;
          background-color: transparent;
          color: #1E8FFF;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
          line-height: 0.4rem;
          position: absolute;
          right: 0px;
          top: 0px;
          bottom: 0px;
          margin: auto;
        }
        .getphoCodeR {
          height: 0.4rem;
          border: 0;
          margin-left: auto;
          font-size: 0.3rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #606775;
          background: #fff;
        }
      }
      .loginPassword {
        position: relative;
        width: 100%;
        height: 1rem;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        border: 1px solid #E5E5E5;
        border-radius: 0.1rem;
        padding: 0 0.24rem;
        margin-top: 0.24rem;
        .phoCodeIcon {
          width: 0.3rem;
        }
        .pwd-right{
          position: absolute;
          width: 0.30rem;
          right: 0.24rem;
        }
        .phoCodeInput {
          // 解决在 ios 下点击 input 页面空白问题
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          width: 5rem;
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .getphoCode {
          width: 1.9rem;
          height: 0.4rem;
          background-color: transparent;
          color: #1E8FFF;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
          line-height: 0.4rem;
        }
        .getphoCodeR {
          height: 0.4rem;
          border: 0;
          margin-left: auto;
          font-size: 0.3rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #606775;
          background: #fff;
        }
      }
      .contract-forget{
        position: relative;
        width: 100%;
        margin-top: 0.5rem;
        div{
          display: inline-block;
        }
        .contract-left{
          .contract-word{
            display: inline-block;
            color: #5E8EFE;
            font-size: 0.28rem;
            font-family: PingFangSC-Regular;
            font-weight: 400;
          }
        }
      }
      .loginPhoCode {
        width: 100%;
        height: 1rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        margin-top: 0.2rem;

        .phoCodeIcon {
          width: 0.3rem;
        }
        .phoCodeInput {
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .getphoCode {
          width: 1.6rem;
          height: 0.4rem;
          background-color: transparent;
          border: 1px solid #1E8FFF!important;
          color: #1E8FFF;
          border: 0;
          margin-left: auto;
          border-radius:0.04rem;
          font-size: 0.22rem;
          line-height: 0.4rem;
        }
        .getphoCodeR {
          width: 1rem;
          height: 0.4rem;
          background-color: #a4a09c;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
        }
      }
      .loginBtn {
        margin-top: 0.5rem;
        width: 100%;
        height: 0.9rem;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.1rem;
        font-size: 0.3rem;
        background: #5E8EFE;
      }
    }
  }
}
</style>
